iT邦幫忙

2021 iThome 鐵人賽

DAY 25
0
Modern Web

JavaScript 筆記 2 版系列 第 25

JavaScript Day25 - Promise(2)

  • 分享至 

  • xImage
  •  

Promise

  • Promise.all():等待裡面的都完成才回傳,因為是全部完成,所以會是陣列,失敗就是回傳失敗那個
  • Promise.race():等待裡面的第一筆完成就回傳

Promise 例子

// 有機率失敗
function test1 (name, time){
    return new Promise((resolve, reject)=>{
    setTimeout(()=>{
        if(Math.random() > 0.5){
            resolve(`${name}: success`)
        }
        else{
            reject(`${name}: error`)
        }
    }, time)
    })
}

// 一定成功
function test2 (name, time){
    return new Promise((resolve, reject)=>{
    setTimeout(()=>{
        if(true){
            resolve(`${name}: success`)
        }
        else{
            reject(`${name}: error`)
        }
    }, time)
    })
}

Promise.all

// 有機率失敗
Promise.all([test1('a',1000),test1('b',2000),test1('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 ['a: success', 'b: success', 'c: success']
// 失敗回傳 a: error or b: error or c: error 其中一種

// 一定成功
Promise.all([test2('a',1000),test2('b',2000),test2('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 ['a: success', 'b: success', 'c: success']

Promise.race

// 有機率失敗
Promise.race([test1('a',1000),test1('b',2000),test1('c',3000)]).then((data)=>{
    console.log(data);
}).catch((error)=>{
    console.log(error);
})
// 成功回傳 a: success
// 失敗回傳 a: error

參考資料

MDN 使用 Promise
MDN Promise
鐵人賽:使用 Promise 處理非同步
JavaScript Promise 全介紹
JS 原力覺醒 Day14 - 一生懸命的約定:Promise
JavaScript基本功修練:Day25 - Promise
從Promise開始的JavaScript異步生活
Promise 與 Opendata
JavaScript 同步延遲 ( Promise + setTimeout )
JavaScript | 從Promise開始承諾的部落格生活

次回

再稍微 Promise 一下


上一篇
JavaScript Day24 - Promise(1)
下一篇
JavaScript Day26 - Async、Await
系列文
JavaScript 筆記 2 版31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言